<!-- eslint-disable vue/valid-v-slot -->
<!-- eslint-disable vue/no-lone-template -->
<template>
  <div class="main-container">
    <div class="ssad" v-if="list.length > 0">
      <div v-for="items in list" :key="items.id">
        <div style="padding-top: 20px">
          <span class="title">{{ items.name }}</span>
        </div>
        <div style="display: flex; flex-wrap: wrap" class="list">
          <div class="box" v-for="item in items.list" :key="item.id">
            <div class="name">
              <div>
                <img class="img" :src="item.logoUrl" alt="" />
              </div>
              <div style="margin-left: 10px">
                <a-tooltip :content="item.name">
                  <div class="names">{{ item.name }}</div></a-tooltip
                >

                <div class="rou"
                  >数量：{{ item.number }}条,单价：{{
                    Math.floor((item.price / item.number) * 100) / 100
                  }}元</div
                >
              </div>
            </div>
            <div style="display: flex">
              <div class="left">
                <span v-if="item.appPrice == 0">免费</span>
                <span v-else>售价：{{ item.price }}元</span>
              </div>
              <div @click="getDetails(item)" class="right">立即购买</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ssad" v-else> <a-empty /></div>
    <a-modal
      v-model:visible="visible"
      title="立即购买"
      :mask-closable="false"
      title-align="start"
      :onBeforeClose="beforClose"
    >
      <a-form :model="detailForm.detail">
        <a-form-item field="name" label="商品名称">
          <a-input v-model="detailForm.detail.name" readonly />
        </a-form-item>
        <a-form-item field="post" label="商品售价">
          <a-input v-model="detailForm.detail.price" readonly />
        </a-form-item>
        <a-form-item field="post" label="商品单价">
          <a-input v-model="detailForm.detail.one" readonly />
        </a-form-item>
        <a-form-item label="支付方式" field="payType">
          <a-radio-group @change="getPayListFn" class="radio-bcg" v-model="detailForm.payType">
            <a-radio v-for="(item, index) in seachForm.list" :key="index" :value="index">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">{{ item.payType.name }}</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="post" v-if="detailForm.payList.length > 0" label="支付商户">
          <a-select
            placeholder="请选择支付商户"
            allow-search
            v-model="detailForm.payId"
            allow-clear
          >
            <a-option v-for="item in detailForm.payList" :key="item.id" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="beforClose">取消</a-button>
          <a-button type="primary" :loading="loading" @click="ok">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="visibles"
      title="扫码支付"
      width="280px"
      :mask-closable="false"
      title-align="start"
      hide-cancel
      hide-ok
    >
      <div
        ><div style="text-align: center"
          >￥<span style="font-size: 26px">{{ detailForm.detail.price }}</span></div
        >
        <img style="width: 240px; height: 240px" :src="seachForm.imgUrl" alt="" />
      </div>
      <template #footer>
        <a-space>
          <a-button type="primary" @click="paySuccessFn(seachForm.payForm)">我已支付</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { productList, payList, qr, pay, paySuccess } from '@/api/url'
  import { get } from '@/api/http'
  import { onMounted, reactive, ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  const seachForm = reactive({
    name: '',
    list: [
      {
        payType: { name: '' },
        paymentLists: [],
      },
    ],
    type: 0,
    imgUrl: '',
    payForm: { systemOrderNumber: '', orderType: '' },
  })

  const detailForm = reactive({
    detail: {
      name: '',
      price: '',
      id: '',
      one: 0,
    },
    payType: 0,
    payList: [{ id: 1, name: '支付商户' }],
    payId: 1,
  })
  const loading = ref(false)
  const visible = ref(false)
  const visibles = ref(false)

  const list: any = ref([])

  const paySuccessFn = () => {
    get({
      url: paySuccess,
      data: {
        orderNumber: seachForm.payForm.systemOrderNumber,
        type: seachForm.payForm.orderType,
      },
    })
      .then((res) => {
        if (res.code == 0) {
          visibles.value = false
          Message.success(res.msg)
          getAppList()
        }
      })
      .catch(() => {})
  }

  const ok = () => {
    loading.value = true
    get({
      url: pay,
      data: {
        payId: detailForm.payId,
        objectId: detailForm.detail.id,
        payType: 6,
      },
    })
      .then((res) => {
        seachForm.payForm = res.data
        loading.value = false
        if (res.data.returnType == 3) {
          seachForm.imgUrl = `${window.location.protocol}//${window.location.host}${qr}?content=${res.data.data}`
          visibles.value = true
        } else if (res.data.returnType == 2) {
          window.location.href = res.data.data
        } else if (res.data.returnType == 4) {
          Message.success('购买成功')
        }
      })
      .catch(() => {
        loading.value = false
      })
  }

  const beforClose = () => {
    detailForm.payId = 0
    detailForm.payList = []
    detailForm.payType = 0
    visible.value = false
  }

  const payListFn = () => {
    get({
      url: payList,
      data: { type: seachForm.type },
    }).then((res) => {
      seachForm.list = res.data
    })
  }

  const getPayListFn = () => {
    detailForm.payList = seachForm.list[detailForm.payType].paymentLists
    detailForm.payId = seachForm.list[detailForm.payType].paymentLists[0].id
  }

  function is_weixn() {
    var ua = navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      seachForm.type = 1
      return true
    } else {
      seachForm.type = 2
      return false
    }
  }

  is_weixn()

  const getDetails = (val: any) => {
    val.one = Math.floor((val.price / val.number) * 100) / 100
    detailForm.detail = val
    if (seachForm.list.length > 0) {
      detailForm.payList = seachForm.list[0].paymentLists
      if (seachForm.list[0].paymentLists.length > 0) {
        detailForm.payId = seachForm.list[0].paymentLists[0].id
      }
    }
    visible.value = true
  }

  const getAppList = () => {
    get({
      url: productList,
      data: {},
    }).then((res) => {
      list.value = res.data
    })
  }

  onMounted(async () => {
    await getAppList()
    await payListFn()
    // await getTableDepartments()
  })
</script>

<style lang="less" scoped>
  .ssad {
    background-color: var(--color-bg-2);
    border-radius: 10px;
    padding: 0px 20px 20px 20px;
    .title {
      font-size: 22px;
    }
    .role {
      margin-left: 10px;
      font-size: 12px;
      color: #939799;
    }
    .list {
      width: calc(100% - 20px);
      .box {
        width: calc(20% - 20px);
        height: 134px;
        border-radius: 10px;
        margin-left: 20px;
        border: 1px solid #f2f3f5;
        margin-top: 20px;

        .left {
          width: 50%;
          text-align: center;
          line-height: 35px;
          font-size: 13px;
          border-right: 1px solid #f2f3f5;
          cursor: pointer;
        }
        .right {
          width: 50%;
          text-align: center;
          line-height: 35px;
          font-size: 13px;
          color: #3491fa;
          cursor: pointer;
        }
        .name {
          display: flex;
          padding: 20px;
          border-bottom: 1px solid #f2f3f5;
          .names {
            width: 120px;
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .rou {
            margin-top: 10px;
            font-size: 12px;
            color: #939799;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .img {
          width: 50px;
          height: 50px;
          border-radius: 25px;
        }
      }
    }
  }
</style>
